<template>
  <div class="component-demo">
    <h1>组件使用示例</h1>

    <!-- 1. 基础组件使用 -->
    <section class="demo-section">
      <h2>基础组件</h2>
      
      <!-- 图标组件 -->
      <div class="icon-demo">
        <h3>图标组件</h3>
        <SimpleIcon name="home" size="24px" />
        <SimpleIcon name="user" size="24px" color="#67C23A" />
        <SimpleIcon name="settings" size="24px" color="#409EFF" />
      </div>

      <!-- SVG 图标组件 -->
      <div class="svg-icon-demo">
        <h3>SVG 图标组件</h3>
        <SvgIconSvgIcon icon-class="home" size="24px" />
        <SvgIconSvgIcon icon-class="user" size="24px" color="#E6A23C" />
      </div>
    </section>

    <!-- 2. 客户端组件 -->
    <section class="demo-section">
      <h2>客户端组件</h2>
      <client-only>
        <ThemeSwitcher />
      </client-only>
    </section>

    <!-- 3. 表格组件 -->
    <section class="demo-section">
      <h2>表格组件</h2>
      <!-- <Table :columns="tableColumns" :data-source="tableData" /> -->
    </section>

    <!-- 4. 条件渲染 -->
    <section class="demo-section">
      <h2>条件渲染</h2>
      <el-button @click="toggleIcons">切换图标显示</el-button>
      <div v-if="showIcons" class="conditional-icons">
        <SimpleIcon 
          v-for="icon in iconList" 
          :key="icon"
          :name="icon" 
          size="20px"
          style="margin-right: 8px;"
        />
      </div>
    </section>

    <!-- 5. 循环渲染 -->
    <section class="demo-section">
      <h2>循环渲染</h2>
      <div class="card-grid">
        <el-card 
          v-for="(item, index) in cardData" 
          :key="index"
          class="demo-card"
        >
          <template #header>
            <div class="card-header">
              <SimpleIcon :name="item.icon" size="18px" />
              <span>{{ item.title }}</span>
            </div>
          </template>
          <p>{{ item.content }}</p>
        </el-card>
      </div>
    </section>

    <!-- 6. 组件通信 -->
    <section class="demo-section">
      <h2>组件通信</h2>
      <div class="communication-demo">
        <el-button @click="updateIconName">切换图标: {{ currentIcon }}</el-button>
        <SimpleIcon :name="currentIcon" size="32px" style="margin-left: 12px;" />
      </div>
    </section>

    <!-- 7. 布局组件 -->
    <Layouts :gutter="24" :span=[4,20] :color="['','']">
        <template #left>
        </template>
        <template #right>
        </template>
    </Layouts>

    <!-- 8. 标签选择组件 -->
    <TagsSelect style="margin-left: 20px;" @call-parent="parentMethod" :list="list" /> 

    <!-- 9. 表单 RadioGroupBtn -->
    <RadioGroupBtn @change="RadioGroupBtnChange" style="margin-left: 14px;" :list="btnList"></RadioGroupBtn>

  </div>
</template>

<script setup lang="ts">
// 响应式数据
const showIcons = ref(true)
const currentIcon = ref('home')

// 图标列表
const iconList = ['home', 'user', 'settings', 'search', 'edit']

// 卡片数据
const cardData = ref([
  { icon: 'home', title: '首页', content: '系统主页面' },
  { icon: 'user', title: '用户', content: '用户管理模块' },
  { icon: 'settings', title: '设置', content: '系统设置' },
  { icon: 'calendar', title: '日程', content: '日程管理' }
])

// 表格配置
const tableColumns = ref([
  { prop: 'name', label: '姓名', width: 100 },
  { prop: 'age', label: '年龄', width: 80 },
  { prop: 'address', label: '地址' },
  { 
    type: 'action', 
    label: '操作', 
    width: 150,
    buttonGroup: [
      { label: '编辑', type: 'primary', click: (row: any) =>console.log('编辑', row) },
      { label: '删除', type: 'danger', click: (row: any) => console.log('删除', row) }
    ]
  }
])

const tableData = ref([
  { name: '张三', age: 30, address: '北京市朝阳区' },
  { name: '李四', age: 25, address: '上海市浦东新区' },
  { name: '王五', age: 35, address: '广州市天河区' }
])

// 方法
const toggleIcons = () => {
  showIcons.value = !showIcons.value
}

const updateIconName = () => {
  const currentIndex = iconList.indexOf(currentIcon.value)
  const nextIndex = (currentIndex + 1) % iconList.length
  const nextIcon = iconList[nextIndex]
  if (nextIcon) {
    currentIcon.value = nextIcon
  }
}

// 标签选择组件数据
const list = ref(['库存', '采购', '领用', '调拨', '报损','盘点','供应商'])
const types  = ref<string>('库存')
const parentMethod = (e:string) => {
    //console.log(e,'父组件方法被调用');
    types.value = e
};

// 按钮组数据
const btnList = ref([
    {name:'全部',id:0},
    {name:'中西成药',id:1},
    {name:'中药',id:2},
    {name:'耗材',id:3},
])
const RadioGroupBtnChange = (e:string) => {
    //console.log(e,'父组件方法被调用');
    types.value = e
};

</script>

<style scoped lang="scss">
.component-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  h1 {
    color: var(--el-color-primary);
    margin-bottom: 30px;
    text-align: center;
  }

  .demo-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid var(--el-border-color);
    border-radius: 8px;
    background-color: var(--el-bg-color-overlay);

    h2 {
      color: var(--el-text-color-primary);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--el-color-primary-light-8);
    }

    h3 {
      color: var(--el-text-color-regular);
      margin: 15px 0 10px 0;
      font-size: 16px;
    }
  }

  .icon-demo, .svg-icon-demo {
    margin-bottom: 20px;
    
    :deep(.simple-icon), :deep(.svg-icon) {
      margin-right: 12px;
      padding: 8px;
      border: 1px solid var(--el-border-color-light);
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
      }
    }
  }

  .conditional-icons {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--el-color-info-light-9);
    border-radius: 6px;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 15px;

    .demo-card {
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-2px);
      }

      .card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }
    }
  }

  .communication-demo {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--el-color-success-light-9);
    border-radius: 6px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .component-demo {
    padding: 15px;

    .demo-section {
      padding: 15px;
    }

    .card-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
